<template>
  <div class="miwenBox">
    <div class="handle leftHandle" @click="clickLeft">
      <a-icon class="close-icon" type="right" title="展开" />
    </div>
    <div class="handle rightHandle" v-show="rightVisible" @click="clickRight">
      <a-icon class="close-icon" type="left" title="展开" />
    </div>
    <map-draw ref="mapDrawId" />
    <MiwenListDrawer :visible="isMiwenListShow" @close="closeMiwenListDrawer" @clickRow="onClickRow" />
    <DetailModal1 @close="closeDetail1" ref="detailModal1" v-show="isDetail1Show" />
    <DetailModal2
      @close="closeDetail2"
      ref="detailModal2"
      v-show="isDetail2Show"
      @on-task-details-drawer="drawTaskDetailsDrawer"
    />
    <DetailModal3
      @close="closeDetail3"
      ref="detailModal3"
      v-show="isDetail3Show"
      @on-task-details-drawer="drawTaskDetailsDrawer"
    />
  </div>
</template>

<script>
import MiwenListDrawer from './components/miwen_list_drawer'
import DetailModal1 from './components/detailModal1'
import DetailModal2 from './components/detailModal2'
import DetailModal3 from './components/detailModal3'
import mapDraw from '../../modules/mapDraw'

export default {
  components: {
    MiwenListDrawer,
    DetailModal1,
    DetailModal2,
    DetailModal3,
    mapDraw
  },
  data() {
    return {
      isMiwenListShow: true,
      isDetail1Show: false,
      isDetail2Show: false,
      isDetail3Show: false,
      rightVisible: false,
      modelType: '',
    }
  },
  mounted() {},
  methods: {
    clickRight() {
      this.rightVisible = false
      // this.isDetailModalShow = true
      if (this.modelType == 1) {
        this.isDetail1Show = true
      }
      if (this.modelType == 2) {
        this.isDetail2Show = true
      }
      if (this.modelType == 3) {
        this.isDetail3Show = true
      }
    },
    closeMiwenListDrawer() {
      this.isMiwenListShow = false
    },
    closeDetail1() {
      this.isDetail1Show = false
      this.rightVisible = true
    },
    closeDetail2() {
      this.isDetail2Show = false
      this.rightVisible = true
    },
    closeDetail3() {
      this.isDetail3Show = false
      this.rightVisible = true
    },
    onClickRow(row) {
      // 关闭查询轨迹弹窗
      this.$refs.mapDrawId.removeOverlay()
      this.isDetail1Show = false
      this.isDetail2Show = false
      this.isDetail3Show = false
      this.rightVisible = false
      this.modelType = row.modelType
      if (row.modelType == 1) {
        //异常出入岛人群挖掘
        this.isDetail1Show = true
        this.$refs.detailModal1.show(row)
      }
      if (row.modelType == 2) {
        //可疑船舶与人员关系挖掘
        this.isDetail2Show = true
        this.$refs.detailModal2.show(row)
      }
      if (row.modelType == 3) {
        //消费行为异常人员挖掘
        this.isDetail3Show = true
        this.$refs.detailModal3.show(row)
      }
    },
    // 响应任务查询结果弹窗添加标准轨迹
    drawTaskDetailsDrawer(data) {
      this.$refs.mapDrawId.drawTaskDetailsDrawer(data)
    },
    onDetail(index) {
      console.log('index：' + index)
      this.isMiwenListShow = false
      this.isDetail1Show = false
    },
    onPY() {
      this.isMiwenListShow = true
      this.isDetail1Show = true
    },
    onTransfer(id) {
      console.log('id')
      console.log(id)
      this.$refs.transModalId.show(id)
    },
    clickLeft() {
      this.isMiwenListShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.miwenBox {
  position: relative;
  left: -10px;
  right: 0;
  top: -10px;
  bottom: 0;
  z-index: 800;
  // height: 650px;
  overflow: hidden;
  /deep/span.BMap_Marker {
    img {
      display: none !important;
    }
  }
  .ant-drawer-content-wrapper {
    height: 100% !important;
  }
  .breadcrumb-box {
    position: absolute;
    right: 20px;
    top: 7px;
    z-index: 10000;
  }
}
.map {
  .miwenBox;
  top: 0;
  transition: all 0.3s;
  &.offset-x-30 {
    left: 30%;
  }
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100px);
  border-radius: 10px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  i {
    margin-right: 12px;
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
